<template>
  <div class="resources">
    <div class="item">
      <div class="title">应用logo</div>
      <div class="el logo">
        <img :src="resources.logo" alt="" />
      </div>
      <div class="btn">
        <el-button type="primary" @click="showDialog('logo')">更换</el-button>
      </div>
    </div>
    <div class="item">
      <div class="title">默认头像</div>
      <div class="el">
        <img :src="resources.defaultAvatar" alt="" />
      </div>
      <div class="btn">
        <el-button type="primary" @click="showDialog('默认头像')"
          >更换</el-button
        >
      </div>
    </div>
    <div class="item">
      <div class="title">qq二维码</div>
      <div class="el">
        <img :src="resources.qcQQ" alt="" />
      </div>
      <div class="btn">
        <el-button type="primary" @click="showDialog('qq二维码')"
          >更换</el-button
        >
      </div>
    </div>
    <div class="item">
      <div class="title">微信二维码</div>
      <div class="el">
        <img :src="resources.qcWechat" alt="" />
      </div>
      <div class="btn">
        <el-button type="primary" @click="showDialog('微信二维码')"
          >更换</el-button
        >
      </div>
    </div>
    <div class="item">
      <div class="title">用户背景图</div>
      <div class="el user-bg">
        <img :src="resources.userBg" alt="" />
      </div>
      <div class="btn">
        <el-button type="primary" @click="showDialog('用户背景图')"
          >更换</el-button
        >
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="`更换${title}`"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      @close="close"
    >
      <input type="file" ref="file" hidden @change="updateResource" />
      <el-button
        type="primary"
        @click="$refs.file.click()"
        style="width: 100%"
        :loading="loading"
      >
        更换资源
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getList, update } from "@/api/admin/resources";
import { Message } from "element-ui";
import { uploadFile } from "@/api/common/common";
export default {
  name: "adminResources",
  data() {
    return {
      title: "",
      dialogVisible: false,
      resources: {},
      loading: false,
    };
  },
  created() {
    this.getResources();
  },
  methods: {
    async getResources() {
      const res = await getList();
      this.resources = res.data;
    },
    showDialog(title) {
      this.title = title;
      this.dialogVisible = true;
    },
    // 判断文件是否符合要求
    checkFile(file) {
      let fileType = file.type === "image/png" || file.type === "image/jpeg";
      if (this.title === "用户背景图") {
        fileType =
          file.type === "image/png" ||
          file.type === "image/jpeg" ||
          file.type === "image/gif";
      }
      const fileSize = file.size / 1024 / 1024 < 2;
      if (!fileType) {
        if (this.title === "用户背景图") {
          this.$message.error("请上传png或jpg或gif格式的图片");
        } else {
          this.$message.error("请上传png或jpg格式的图片");
        }
        return false;
      }
      if (!fileSize) {
        this.$message.error("图片大小不能超过2MB");
        return false;
      }
      return fileType && fileSize;
    },
    async updateResource(file) {
      try {
        this.loading = true;
        const f = file.target.files[0];
        const flag = this.checkFile(f);
        if (flag) {
          const formData = new FormData();
          formData.append("file", f);
          const res = await uploadFile(formData);
          switch (this.title) {
            case "logo":
              this.resources.original = this.resources.logo;
              this.resources.logo = res.data;
              break;
            case "默认头像":
              this.resources.original = this.resources.defaultAvatar;
              this.resources.defaultAvatar = res.data;
              break;
            case "qq二维码":
              this.resources.original = this.resources.qcQQ;
              this.resources.qcQQ = res.data;
              break;
            case "微信二维码":
              this.resources.original = this.resources.qcWechat;
              this.resources.qcWechat = res.data;
              break;
            case "用户背景图":
              this.resources.original = this.resources.userBg;
              this.resources.userBg = res.data;
              break;
          }
          await update(this.resources);
          this.getResources();
        }
      } finally {
        this.loading = false;
        this.dialogVisible = false;
      }
    },
    close() {
      if (this.loading) {
        Message.warning("请先上传完成");
        this.dialogVisible = true;
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.resources {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 560px;
    border-bottom: 1px solid #ccc;
    .title,
    .btn {
      width: 100px;
      text-align: right;
    }
    .el {
      margin: 10px 20px;
      width: 100px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .logo {
      width: 70px;
      height: 70px;
    }
    .user-bg {
      width: 220px;
      height: 90px;
    }
  }
}
</style>